<template>
  <div class="order-details">
    <div
      class="status"
      :class="statusBg"
    ></div>
    <a-row>
      <a-col :span="24">
        <div class="fwdz">{{ details.fwdz }}{{ details.fh }}&emsp;</div>
      </a-col>
    </a-row>
    <div class="title">入住人员</div>
    <a-row
      v-for="(tenant, index) in order.tenantList"
      :key="index"
      class="orderrow"
    >
      <a-col :span="8"><span>入住人：{{ tenant.zkxm }} {{ tenant.lxdh }}</span></a-col>
      <a-col :span="8">
        <span v-if="tenant.rzbz === '2'">
          <a-icon
            :component="iconNotcertified"
            style="margin-right:5px"
          />
          <span v-if="order.ddzt === '1' || order.ddzt === '2'"><span>未认证</span>&emsp;<a-button
            type="default"
            @click="setCertificationsWindow(tenant)"
            style="color:#40a9ff;border-color:#40a9ff;"
          >登记认证</a-button></span><span v-else>未认证</span>
        </span>
        <span v-else-if="tenant.rzbz === '1'">
          <a-icon
            :component="iconVerified"
            style="margin-right:5px"
          />已认证
        </span>
        <span v-else-if="tenant.rzbz === '3'">
          <a-icon
            :component="iconPeopleVerified"
            style="margin-right:5px"
          />人工认证
        </span>
      </a-col>
      <a-col :span="8"><span>身份证：{{ tenant.zjhm }}</span></a-col>
    </a-row>
    <div class="title pad_top28">入住时间</div>
    <a-row>
      <a-col :span="10"><span>{{ order.rzsj }}</span></a-col>
      <a-col :span="4"><span>共{{ order.rzts }}晚</span></a-col>
      <a-col :span="10">{{ order.ldsj }}</a-col>
    </a-row>
    <a-modal
      :maskClosable="false"
      v-model="isCertificationsShow"
      title="实名认证"
      :width="1200"
      class="jlw_model_title certifications"
      destroyOnClose
    >
      <a-popover placement="bottomLeft">
        <template slot="content">
          <div><img
            :src="GuidancImg"
            alt=""
            style="width:520px;"
          /></div>
        </template>
        <a-icon
          type="question-circle"
          class="certificaHelp"
        />
      </a-popover>
      <status-certifications
        :tenant-info="tenantInfo"
        ref="certificationsDom"
        :order-id="order.orderId"
      >
      </status-certifications>
      <template slot="footer">
        <a-button
          type="primary"
          ghost
          @click="cancelCertificationsShow"
        >取消</a-button>
        <a-button
          type="primary"
          class="primary_linear"
          @click="submitCertificationsInfo"
          :loading="certificationsLoading"
        >认证</a-button>
      </template>
    </a-modal>
    <a-modal
      :maskClosable="false"
      v-model="isGuidanceShow"
      title="实名认证"
      :width="760"
      class="jlw_model_title certifications"
    >
      <div><img
        :src="GuidancImg"
        alt=""
        style="width:100%;"
      /></div>
      <template slot="footer">
        <a-button
          type="primary"
          ghost
          @click="cancelGuidancShow"
        >取消</a-button>
        <a-button
          type="primary"
          class="primary_linear"
          @click="handleGuidancInfo"
        >开始认证</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { iconNotcertified, iconVerified, iconPeopleVerified } from '@/core/icons'
import StatusCertifications from './StatusCertifications'
import GuidancImg from '@/assets/images/photo.png'
import Cookies from 'js-cookie'
export default {
  name: 'OrderDetail',
  props: {
    details: {
      type: Object,
      default: () => {
        return {}
      }
    },
    orderManage: {
      type: String,
      default: ''
    }
  },
  components: {
    StatusCertifications
  },
  data () {
    return {
      iconPeopleVerified,
      GuidancImg,
      iconNotcertified,
      iconVerified,
      isCertificationsShow: false, // 实名认证窗口
      certificationsLoading: false, // 实名认证窗口加载状态
      tenantInfo: {},
      isGuidanceShow: false // 实名认证指导窗口
    }
  },
  computed: {
    statusBg () {
      const ddzt = this.order.ddzt
      let bgImg = ''
      switch (ddzt) {
        case '1':
          bgImg = `icon-wait`
          break
        case '2':
          bgImg = `icon-check-in`
          break
        case '3':
          bgImg = `icon-retreat`
          break
        case '4':
          bgImg = `icon-cancel`
          break
      }
      return bgImg
    },
    /* 判断来源
     *orderManage 代表是入住管理来的
     */
    order () {
      if (this.orderManage === 'orderManage') {
        return this.details
      } else {
        return this.details['orderList'][0]
      }
    }
  },
  methods: {
    setCertificationsWindow (tenantInfo) {
      this.tenantInfo = Object.assign({}, tenantInfo)
      const JLW_VERIFIED = Cookies.get('JLW_VERIFIED')
      if (JLW_VERIFIED && JLW_VERIFIED === '1') {
        this.isCertificationsShow = true
        this.$emit('refreshCertifications', 1)
      } else {
        Cookies.set('JLW_VERIFIED', '1', { expires: 7 })
        this.isGuidanceShow = true
      }
    },
    async submitCertificationsInfo () {
      this.certificationsLoading = true
      try {
        const res = await this.$refs.certificationsDom.handleSubmit()
        if (res.code === 200) {
          let msg = ''
          if (res.status === 2) {
            msg = this.$t('message.manualReview')
          } else {
            msg = this.$t('message.authenticationSuccess')
          }
          this.$notification['success']({
            message: this.$t('message.successTitle'),
            description: msg
          })
          this.certificationsLoading = false
          this.isCertificationsShow = false
          this.$emit('refreshCertifications', 2)
          // 创建成功才能回调清空表单
          this.$refs.certificationsDom.handleReset()
        }
      } catch {
        this.certificationsLoading = false
        console.log('验证不通过')
      }
    },
    cancelGuidancShow () {
      this.isGuidanceShow = false
    },
    handleGuidancInfo () {
      this.isGuidanceShow = false
      if (!this.isCertificationsShow) {
        this.isCertificationsShow = true
        this.$emit('refreshCertifications', 1)
      }
    },
    cancelCertificationsShow () {
      this.isCertificationsShow = false
    }
  }
}
</script>
<style lang="less" scoped>
.order-details {
  position: relative;

  .fwdz {
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    // margin-top: 24px;
  }

  .title {
    width: 56px;
    height: 16px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    line-height: 16px;
    margin-bottom: 22px;
  }

  .status {
    position: absolute;
    top: 15px;
    right: -24px;
    width: 59px;
    height: 26px;
  }

  .icon-check-in {
    background-image: url('../../../../assets/icon-check-in.png');
    background-position: center center;
    background-size: cover;
  }

  .icon-wait {
    background-image: url('../../../../assets/icon-wait.png');
    background-position: center center;
    background-size: cover;
  }
  .icon-cancel {
    background-image: url('../../../../assets/icon-cancel.png');
    background-position: center center;
    background-size: cover;
  }
  .icon-retreat {
    background-image: url('../../../../assets/icon-retreat.png');
    background-position: center center;
    background-size: cover;
  }

  .times {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 10px;
  }
}
#msgClass {
  color: red;
}
</style>
<style lang="less">
.certifications.jlw_model_title {
  .ant-modal-body {
    padding-right: 74px;
  }
}
.certificaHelp {
  position: absolute;
  top: 20px;
  left: 96px;
  cursor: pointer;
}
</style>
